<template>
	<view class="content">
		<!-- 内容 -->
		<view class="cotentBox">
			<!-- 个人信息 -->
			<view class="" v-if="status">
				<view class="boxTop"></view>
				<view class="boxInfo">
					<view class="infoHeader">
						<view class="infoXian"></view>
						<view class="infoText">核对个人信息</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">气表号:</view>
							<view class="infoFormRight">{{info.meter_num}}</view>
						</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">姓名:</view>
							<view class="infoFormRight">{{info.realname}}</view>
						</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">电话:</view>
							<view class="infoFormRight">{{info.mobile}}</view>
						</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">身份证号:</view>
							<view class="infoFormRight">{{info.ID_num}}</view>
						</view>
					</view>
					<view class="infoBox">
						<view class="infoForm">
							<view class="infoFormLeft">地址:</view>
							<view class="infoFormRight">{{info.adress}}</view>
						</view>
					</view>
					<view class="infoBox">
						<view class="infoForm" @tap="show = !show">
							<view class="infoFormLeft">预约事项:</view>
							<view :class="selectObj.name?'infoFormRight':'no'">{{selectObj.name||'请选择您的预约事项'}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 补充说明 -->
			<view class="supplement">
				<view class="explain">
					<textarea v-model="textAr" maxlength="200" auto-height @input="textChange" class="textArea"
						placeholder="请补充说明您的需求" />
				</view>
				<view class="suppBottom">
					<view class="danger-img-box">
						
						<template v-for="i,index in img1">
							<view class="danger-img" :key="index">
								<!-- <image class="delet" src="/static/delet.png" mode=""@click="deletImg"></image> -->
								<image class="realImg" :src='i' @tap="seeimg(img1,index)"></image>
								<view class="updeletes" @tap="updetail('img1',index)">
									<image src="/static/delete.png" mode="aspectFill"></image>
								</view>
							</view>
						</template>
						<view class="danger-img" @click="handleUpdataImg">
							<image class="add" src="/static/updatePhoto.png" mode="" @click="flag = true"></image>
						</view>
					</view>
				<!-- 	<view class="num">
						<view class="">{{textNumber}}/200</view>
					</view> -->
				</view>
			</view>
			<!-- 预约时间 -->
			<view class="outDate">
				<view class="outDateTitle">
					<view class="infoXian"></view>
					<view class="">预约时间</view>
				</view>
				<view class="outDateBottom">
					<view class="outDateChange">请选择您要预约的时间</view>
					<view class="changeDate">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
						<image src="/static/calendar.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 提示 -->
			<view class="cozy" v-if="selectObj">
				<view class="cozyTitle">温馨提示:</view>
				<view class="">
					{{selectObj&&selectObj.tips || ''}}
				</view>
			</view>
			<view class="bottomBtn" @click="diately"
				:style="{'background':oubot ? 'linear-gradient(180deg,#bbbbbb, #999999)':'linear-gradient(180deg,#2979ff, #2979ff)'}">
				立即预约
			</view>
		</view>
		<template>
			<u-select label-name="name" value-name="id" v-model="show" @confirm="confirm" :list="list"></u-select>
		</template>

		<!-- 预约弹框 -->
		<view class="obuPoput" v-if="poputFlag">
			<view class="succeImg">
				<image src="/static/success.png" mode=""></image>
			</view>
			<view class="poputText">
				您已提交业务预约，请留意审核结果提示。审核成功后请保持电话畅通，等待工作人员致电/上门！
			</view>
			<view class="poputBtn" @click="poputFlag = false">
				确定
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="zhezhao" v-if="poputFlag">

		</view>
		<cpimg ref="cpimg" @result="cpimgOk" @err="cpimgErr" :number="1" :fixOrientation="true" :size="500"
			:maxWidth="800" :ql="0.7" type="url" />

	</view>
</template>

<script>
	import cpimg from "@/components/cpimg/cpimg.vue"

	export default {
		components: {
			cpimg
		},
		data() {
			return {
				info: {},
				img1: [],
				textNumber: 0,
				date: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
				poputFlag: false,
				oubot: false,
				fileImg: [],
				textAr: '',
				status: false,
				show: false,
				list: [], // 业务列表
				selectObj: {}, // 预约业务选项
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShow() {
			this.$request.request({
				url: '/index/meke',
				method: 'GET',
			}).then(res => {
				if (res.data.code != 0) {
					this.getInfo()
				}
			})
			this.getYuyueCategoryList()
		},
		onLoad() {
			wx.enableAlertBeforeUnload({
			    message: "是否返回上一页",
			   });
		},
		methods: {
			confirm(e) {
				
				for (let i = 0; i < this.list.length; i++) {
					if(this.list[i].id  === e[0].value){
						this.selectObj = this.list[i]
					}
				}
			},
			getYuyueCategoryList(){
				var _this = this
				uni.request({
					url: _this.$api + 'yuyue/getYuyueCategoryList',
					method: 'POST',
					header:{
						token:uni.getStorageSync('token')
					},
					success: res => {
						console.log('res',res);
						if(res.data.code==1){
							_this.list = res.data.data
						}
						console.log('_this.list',_this.list);
					}
				});
			},
			getInfo() {
				var that = this
				this.$request.request({
					url: '/Yuyue/index',
					method: 'GET',
					data: {
						token:uni.getStorageSync('token')
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.status = true
						that.info = res.data.data
					}
				})
			},
			//图片删除
			updetail(img1,index) {
				this[img1].splice(index,1)
				this.fileImg.splice(index,1)
			},
			//图片预览
			seeimg(img,index) {
				uni.previewImage({
					urls: img,
					current:index
				});
			},

			// 选择气表照片

			// 选择图片
			handleUpdataImg() {
				var that = this;
				if(this.img1.length>7) return this.$showToast('最多上传8张图片')
				that.$refs.cpimg._changImg()
			},

			cpimgOk(file) {
				let that = this
				var ret = that.ret
				uni.showLoading({
					title: '上传中...'
				})
				uni.uploadFile({
					url: that.$fileImg + '/common/upload',
					filePath: file[0],
					name: 'file',
					formData: {
						token:uni.getStorageSync('token')
					},
					success(res1) {
						let dataPath = JSON.parse(res1.data)
						if (dataPath.code == 1) {
							that.fileImg.push(dataPath.data.url)
							that.img1.push(file[0]) 
						}
						uni.hideLoading()
					},
					fail: () => {
						uni.hideLoading()
						uni.showToast({
							title: '上传失败'
						})
					}
				});


			},

			cpimgErr(e) {
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				})
				console.log(e)
			},


			textChange(e) {
				if (e.detail.cursor >= 200) {
					uni.showToast({
						title: '最多可以输入200个字',
						icon: 'none'
					})
				}
				this.textNumber = e.detail.cursor
			},
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			diately() {
				let that = this
				if (that.oubot) {
					return
				}
				if(!that.selectObj.id){
					uni.showToast({
						title: '请选择预约事项',
						icon: 'none'
					})
					return
				}
				if (that.textAr == '') {
					uni.showToast({
						title: '请补充您的需求',
						icon: 'none'
					})
					return
				}
				if (that.img1 == '') {
					uni.showToast({
						title: '请上传需求图',
						icon: 'none'
					})
					return
				}
				if (that.date == '') {
					uni.showToast({
						title: '请选择您要预约的时间',
						icon: 'none'
					})
					return
				}
				that.$request.request({
					url: '/Yuyue/UpYuyue',
					method: 'POST',
					data: {
						token:uni.getStorageSync('token'),
						remark: that.textAr,
						pic: that.fileImg.toString(),
						time: that.date,
						category_name:that.selectObj.name
					}
				}).then(res => {
					if (res.data.code == 1) {
						that.poputFlag = true
						that.oubot = true
					}
				})


			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	.content {
		background: #F4F5F6;
		height: 100%;
		padding-bottom: 80rpx;
	}

	.infoXian {
		width: 8rpx;
		height: 28rpx;
		background: #003690;
		border-radius: 2px;
		margin-right: 18rpx;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx;
		background-color: #fff;

		.header-left {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 500;
			color: #333;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 20rpx;
			}
		}

		.header-right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #333;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: 10rpx;
			}
		}
	}

	.boxTop {
		height: 126rpx;
		background: #003690;
	}

	.danger-img {
		position: relative;
		margin-bottom: 20rpx !important;

		.updeletes {
			position: absolute;
			top: -20rpx;
			right: -20rpx;
			width: 40rpx;
			height: 40rpx;
			z-index: 88;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.boxInfo {
		padding: 8rpx;
		background-color: #fff;
		margin: 0 32rpx;
		margin-top: -70rpx;
		border-radius: 6rpx;

		.infoHeader {
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;

			.infoText {
				font-size: 32rpx;
				font-weight: 600;
				text-align: left;
				color: #003690;
			}
		}

		.infoBox {
			.infoForm {
				overflow: hidden;
				margin-bottom: 14rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #e8e8e8;

				.infoFormLeft {
					float: left;
					font-size: 32rpx;
					color: #333;
					margin-left: 34rpx;
				}

				.infoFormRight {
					float: right;
					font-size: 28rpx;
					color: #333333;
					margin-right: 22rpx;
				}
				.no{
					float: right;
					font-size: 28rpx;
					color: #999999;
					margin-right: 22rpx;
				}
			}

			.infoForm:last-child {
				margin-bottom: 0;
			}

			.infoHneg {
				border: 1rpx solid #dddddd;
				margin-bottom: 14rpx;
			}
		}
	}

	.supplement {
		margin: 20rpx 24rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;

		.explain {
			.textArea {
				min-height: 142rpx;
				padding: 14rpx 30rpx;
				font-size: 32rpx;
				text-align: left;
				color: #333333;
			}
		}

		.suppBottom {
			.danger-img-box{
				display: flex;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.danger-img {
					position: relative;
					margin-left: 50rpx;
					margin-bottom: 20rpx;
					width: 72rpx;
					height: 72rpx;
					float: left;
				
					image {
						width: 100%;
						height: 100%;
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}
			.num {
				float: right;
				margin-right: 26rpx;
			}
		}
	}

	.outDate {
		margin: 20rpx 24rpx;
		background-color: #fff;
		padding: 20rpx;

		.outDateTitle {
			font-size: 32rpx;
			font-weight: 600;
			text-align: left;
			color: #003690;
			display: flex;
			align-items: center;
			margin-bottom: 22rpx;
		}

		.outDateBottom {
			margin-left: 18rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.outDateChange {
				font-size: 32rpx;
				text-align: left;
				color: #333333;
			}

			.changeDate {
				display: flex;
				margin-right: 18rpx;
				align-items: center;

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.cozy {
		margin: 24rpx;
		font-size: 24rpx;
		text-align: left;
		color: #c72b14;

		view {
			line-height: 36rpx;
		}
	}

	.bottomBtn {
		width: 646rpx;
		height: 80rpx;
		margin: 74rpx auto;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
		background-image: linear-gradient(to bottom, #2979ff, #2979ff);
		font-size: 32rpx;
		color: #E5EFFE;
	}

	.obuPoput {
		width: 446rpx;
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 999;

		.succeImg {
			width: 100rpx;
			height: 100rpx;
			margin: 32rpx auto 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.poputText {
			font-size: 32rpx;
			text-align: left;
			color: #555555;
			letter-spacing: 1px;
			margin: 40rpx 28rpx 66rpx;
			line-height: 36rpx;
		}

		.poputBtn {
			width: 200rpx;
			height: 64rpx;
			line-height: 64rpx;
			color: #fff;
			text-align: center;
			background: #003690;
			border-radius: 8px;
			margin: 0 auto 62rpx;
		}
	}

	.zhezhao {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .2);
		z-index: 2;
	}
</style>
